<template>
  <div id="map" :style="mapLayout"></div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { mapState } from 'vuex'

export default {
  name: 'PolylineMap',
  data () {
    return {
      view: null
    }
  },
  computed: {
    ...mapState({
      mapLayout: state => {
        return {
          width: '100%',
          height: state.layoutHeight - 48 + 'px'
        }
      }
    })
  },
  mounted () {
    loadModules(['esri/Map', 'esri/views/MapView', 'esri/Graphic'], { css: true })
      .then(([ArcGISMap, MapView, Graphic]) => {
        // 配置地图的底图
        const map = new ArcGISMap({
          basemap: 'osm'
        })
        // 地图视图对象
        this.view = new MapView({
          // 容器
          container: document.getElementById('map'),
          // 中心点
          center: [117.179359, 31.839979],
          map: map,
          // 缩放
          zoom: 14
        })

        // 创建线几何
        const polyline = {
          type: 'polyline',
          // 二维数组，每个元素是一个地点的经纬度，点越多路线越精准
          paths: [
            [117.129359, 31.839979],
            [117.128810, 31.839979],
            [117.128810, 31.832240],
            [117.227610, 31.833600]
          ]
        }

        // 路径的属性定制
        const lineSymbol = {
          type: 'simple-line', // 类型
          color: '#1e80ff', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制
          width: 3 // 宽度 px
        }

        const polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol
        })

        // 创建线几何2
        const polyline2 = {
          type: 'polyline',
          // 二维数组，每个元素是一个地点的经纬度，点越多路线越精准
          paths: [
            [117.119359, 31.849979],
            [117.118810, 31.849979],
            [117.118810, 31.842240],
            [117.217610, 31.843600]
          ]
        }

        // 路径的属性定制
        const lineSymbol2 = {
          type: 'simple-line', // 类型
          color: '#8c3de5', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制
          width: 3 // 宽度 px
        }

        const polylineGraphic2 = new Graphic({
          geometry: polyline2,
          symbol: lineSymbol2
        })

        // 将图形添加到视图的图形层
        this.view.graphics.addMany([polylineGraphic, polylineGraphic2])
      })
  },
  beforeDestroy () {
    this.view = null
  }
}
</script>

<style scoped>
</style>
